<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', path='./styles.css') }}">
    <title>Типы регионов</title>
</head>
<body>
    {% include 'header.html' %}

    <main>
        <section class="region-types-form">
            <h2>Добавить новый тип региона</h2>
            <form id="regionTypeForm">
                <div>
                    <label for="name">Имя</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <button type="button" onclick="createRegionType()">Создать тип региона</button>
            </form>
        </section>

        <section class="region-types-table">
            <h2>Типы регионов</h2>
            <table id="regionTypesTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Имя</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Данные типов регионов будут загружены здесь -->
                </tbody>
            </table>
        </section>

        <div id="message" class="message"></div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            loadRegionTypes();
        });

        async function loadRegionTypes() {
            try {
                const response = await fetch('/region/types/array');
                if (response.ok) {
                    const regionTypes = await response.json();
                    renderRegionTypes(regionTypes);
                } else {
                    showMessage('Ошибка загрузки типов регионов', 'error');
                }
            } catch (error) {
                showMessage('Ошибка загрузки типов регионов: ' + error.message, 'error');
            }
        }

        function renderRegionTypes(regionTypes) {
            const tableBody = document.querySelector('#regionTypesTable tbody');
            tableBody.innerHTML = '';
            regionTypes.forEach(regionType => {
                const row = tableBody.insertRow();
                const idCell = row.insertCell();
                idCell.textContent = regionType.id;
                const nameCell = row.insertCell();
                const nameInput = document.createElement('input');
                nameInput.type = 'text';
                nameInput.value = regionType.name;
                nameCell.appendChild(nameInput);
                const actionsCell = row.insertCell();
                const saveBtn = document.createElement('button');
                saveBtn.textContent = '💾';
                saveBtn.onclick = () => updateRegionType(regionType.id, nameInput.value);
                actionsCell.appendChild(saveBtn);
                const deleteBtn = document.createElement('button');
                deleteBtn.textContent = '❌';
                deleteBtn.onclick = () => deleteRegionType(regionType.id);
                actionsCell.appendChild(deleteBtn);
            });
        }

        async function createRegionType() {
            const form = document.getElementById('regionTypeForm');
            const formData = new FormData(form);
            const data = Object.fromEntries(formData.entries());

            try {
                const response = await fetch('/region/types/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                if (response.ok) {
                    showMessage('Тип региона создан успешно.', 'success');
                    loadRegionTypes();
                    form.reset();
                } else {
                    showMessage('Ошибка создания типа региона: ' + (await response.json()).detail, 'error');
                }
            } catch (error) {
                showMessage('Ошибка создания типа региона: ' + error.message, 'error');
            }
        }

        async function updateRegionType(typeId, name) {
            try {
                const response = await fetch(`/region/types/${typeId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ name })
                });
                if (response.ok) {
                    showMessage('Тип региона обновлен успешно.', 'success');
                    loadRegionTypes();
                } else {
                    showMessage('Ошибка обновления типа региона: ' + (await response.json()).detail, 'error');
                }
            } catch (error) {
                showMessage('Ошибка обновления типа региона: ' + error.message, 'error');
            }
        }

        async function deleteRegionType(typeId) {
            try {
                const response = await fetch(`/region/types/${typeId}`, {
                    method: 'DELETE'
                });
                if (response.ok) {
                    showMessage('Тип региона удален успешно.', 'success');
                    loadRegionTypes();
                } else {
                    showMessage('Ошибка удаления типа региона: ' + (await response.json()).detail, 'error');
                }
            } catch (error) {
                showMessage('Ошибка удаления типа региона: ' + error.message, 'error');
            }
        }

        function showMessage(message, type) {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = message;
            messageDiv.className = `message ${type}`;
            messageDiv.style.display = 'block';
            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 5000);
        }
    </script>
</body>
</html>